/**
 * Created by huotaol on 2017/5/8.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, Text, TouchableOpacity, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import {Actions} from "react-native-router-flux";
import * as Url from "../../constant/Url";
import {request} from "../../../common/util/RequestUtil";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";

const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class DetailKind extends Component {

    static propTypes = {
        kindList: [],
        onSelected: PropTypes.func,
    };

    static defaultProps = {
        onSelected: () => {
        },
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data: [],
        };
        this._renderItem = this._renderItem.bind(this);
    }

    componentDidMount() {
        const url = Url.BASE_URL + '/car/comm/get_car_model_by_set';
        const param = new FormData();
        param.append('val', this.props.series);
        request(url, 'post', param).then(json => {
            console.log('detail kind ' + json);
            this.setState({data: json.data});
        }).catch(err => {
            console.log('fetch detail err ' + err);
        });
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <ModuleCommonHeader title={'车型选择'}/>
                <ListView
                    style={[this.props.style, {flex: 1,}]}
                    dataSource={DATA_SOURCE.cloneWithRows(this.state.data)}
                    renderSeparator={this._renderSeparator}
                    renderRow={this._renderItem}
                />
            </View>
        );
    }

    _renderItem(item) {
        return <Item item={item} click={() => {
            this.props.onSelected(this.props.brand, this.props.series, item);
            Actions.pop({key: 'BrandRoot'});
        }
        }/>
    }

    _renderSeparator() {
        return <View style={CustomStyle.separator}/>
    }
}

class Item extends Component {
    static propTypes = {
        item: PropTypes.any,
        click: PropTypes.click,
    };

    render() {
        return (
            <TouchableOpacity
                style={{
                    height: CustomStyle.getActualSizeInVertical(88),
                    backgroundColor: 'white',
                    justifyContent: 'center',
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
                }}
                onPress={this.props.click}
            >
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(28),
                        color: 'black',
                    }]}>{this.props.item}</Text>

            </TouchableOpacity>
        );
    }
}

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {};
};


export default connect(mapStateToProps, mapDispatchToProps)(DetailKind);